<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>热词</title>
    <script src="../../components/echarts-4.0.4.min.js"></script>
    <style>
        body,html{
            padding: 0;
            margin: 0;
            background:#0A0F23;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div style="width: 100%;height: 100%;" id="turnover"></div>
</body>
<script>
    var turnover = echarts.init(document.getElementById('turnover'));
    var titleData = "技术交易情况";

        var dataMap = {};

        dataMap.dataVisit = {
            //次数
            2011: [ 58.51, 67.90, 152.81,226.24,292.63, 285.20,463.82],
            //到访人数
            1: [ 5010, 4974, 9434,12651,7142, 5441,11616]
        };

        var barOption = {
            baseOption: {
                timeline: {
                    show: false,
                    axisType: 'category',
                    loop: true,
                    autoPlay: true,
                    playInterval: 1000,
                    label: {
                        normal: {
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        position: 14
                    },
                    lineStyle: {
                        color: '#fff'
                    },
                    controlStyle: {
                        show: false
                    },
                    top: 0,
                    data: [
                       '2011','2012', '2013','2014','2015',' 2016', '2017'
                    ]
                },
                legend: {
                    left: '5%',
                    top:'4px',
                    data: ['交易额', '交易量'],
                    textStyle: {
                        color: '#fff',
                        fontSize:16
                    },
                    itemWidth:15,
                    itemHeight:10
                },
                tooltip: {
                    trigger: 'none',
                    axisPointer: {
                      type: 'shadow',
                    }
                  },
                 grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '10%',
                    top:'25%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisTick: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 0,
                            textStyle: {
                                color: '#fff',fontSize:16
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        data: ['2011','2012', '2013', '2014','2015', '2016', '2017'],
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        // min: 0,
                        // max: 50,
                        name:'交易额（亿元）',
                        nameTextStyle: {
                            color: "#FFF",
                            verticalAlign:'bottom',
                            fontSize:16
                        },
                        //interval: 10,
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisTick: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: '#fff',fontSize:16
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    {
                        type: 'value',
                        // max: 100,
                        // min: 0,
                        name:'交易量（份）',
                        nameTextStyle: {
                            color: "#FFF",
                            verticalAlign:'bottom',
                            fontSize:16
                        },
                        //interval: 150,
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: '#fff',fontSize:16
                            }
                        }
                    }

                ],
                series: [
                    {name: '交易额', type: 'bar',barWidth : 30},
                    {name: '交易量', type: 'line', smooth: true}
                ]
            },
            options: [
                {
                    title: {
                        text: titleData,
                        left: 'center',
                        top:"7%",
                        textStyle: {
                            color: '#fff',
                            fontSize: 22
                        }
                    },
                    series: [
                        {
                            data: dataMap.dataVisit['2011'],
                            itemStyle: {
                                normal: {
                                    color: '#0c8bd1',
                            		fontSize: 22
                                }
                            }
                        },
                        {
                            yAxisIndex: 1,
                            data: dataMap.dataVisit['1'],
                            itemStyle: {
                                normal: {
                                    color: '#9bcf00',
                            		fontSize: 22
                                }
                            }
                        }
                    ]
                }
            ]
        };

        turnover.setOption(barOption);
</script>
</html>